<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/static/favicon.ico">
    <title>{% block title %}复盘系统 - 专业的金融信息服务平台{% endblock %}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #fef9e7 0%, #f7f3e9 50%, #f0ead6 100%);
            min-height: 100vh;
            color: #2c3e50;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 顶部导航 */
        .header {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid rgba(255, 248, 220, 0.3);
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: #8b7355;
            text-decoration: none;
            white-space: nowrap;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }

        .nav-links a:hover {
            color: #8b7355;
            background: rgba(139, 115, 85, 0.1);
        }

        .search-form {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .search-input {
            padding: 6px 10px;
            border-radius: 8px;
            border: 1px solid #e0d8c8;
            outline: none;
            min-width: 220px;
        }

        .search-button {
            padding: 6px 12px;
            border: none;
            border-radius: 8px;
            background: #8b7355;
            color: #fff;
            cursor: pointer;
        }

        /* 移动端菜单按钮 */
        .mobile-menu-btn {
            display: none;
            background: #8b7355;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
        }

        /* 阅读模式切换按钮 */
        .read-mode-toggle {
            background: transparent;
            border: 1px solid #8b7355;
            color: #8b7355;
            padding: 6px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            margin-left: 10px;
        }

        .read-mode-toggle:hover {
            background: #8b7355;
            color: white;
        }

        /* 移动端侧边栏 */
        .mobile-sidebar {
            position: fixed;
            top: 0;
            right: -100%;
            width: 80%;
            max-width: 300px;
            height: 100vh;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 1001;
            padding: 2rem 1.5rem;
            overflow-y: auto;
        }

        .mobile-sidebar.active {
            right: 0;
        }

        .mobile-sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e0d8c8;
        }

        .mobile-sidebar-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #8b7355;
            cursor: pointer;
        }

        .mobile-nav-links {
            list-style: none;
        }

        .mobile-nav-links li {
            margin-bottom: 1rem;
        }

        .mobile-nav-links a {
            display: block;
            padding: 12px;
            color: #333;
            text-decoration: none;
            border-radius: 8px;
            transition: background 0.3s ease;
        }

        .mobile-nav-links a:hover {
            background: rgba(139, 115, 85, 0.1);
        }

        .mobile-search {
            margin-top: 2rem;
        }

        .mobile-search-input {
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #e0d8c8;
            margin-bottom: 10px;
        }

        .mobile-search-button {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 8px;
            background: #8b7355;
            color: white;
            cursor: pointer;
        }

        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .overlay.active {
            display: block;
        }

        /* 阅读模式样式 */
        .read-mode .nav-links,
        .read-mode .search-form,
        .read-mode .read-mode-toggle {
            display: none;
        }

        /* 主要内容区域 */
        .main-content {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            margin: 2rem auto;
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            border: 1px solid rgba(255, 248, 220, 0.3);
        }

        .content-header {
            background: linear-gradient(135deg, #8b7355 0%, #a68a5c 100%);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }

        .content-header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            font-weight: 300;
        }

        .content-header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .content-body {
            padding: 1.5rem;
        }

        /* 表格样式 */
        .table-container {
            padding: 1.5rem;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            font-size: 0.9rem;
        }

        th {
            background: linear-gradient(135deg, #f5f2ed 0%, #ede8e0 100%);
            color: #5d4e37;
            font-weight: 600;
            padding: 0.8rem 0.6rem;
            text-align: left;
            border-bottom: 2px solid #d4c4a8;
            font-size: 0.85rem;
            white-space: nowrap;
        }

        td {
            padding: 0.7rem 0.6rem;
            border-bottom: 1px solid #f0ead6;
            transition: all 0.2s ease;
            vertical-align: top;
        }

        tr:hover {
            background: linear-gradient(135deg, #fef9e7 0%, #f7f3e9 100%);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(139, 115, 85, 0.1);
        }

        tr:hover td {
            border-bottom-color: #e8dcc0;
        }

        /* 链接样式 */
        a {
            color: #8b7355;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        a:hover {
            color: #6b5b47;
            text-decoration: underline;
        }

        /* 表格内链接样式 */
        td a {
            color: #8b7355;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        td a:hover {
            color: #6b5b47;
            text-decoration: underline;
        }

        /* 分页样式 */
        .pagination {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            margin: 1.5rem auto;
            padding: 1.2rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            text-align: center;
            border: 1px solid rgba(255, 248, 220, 0.3);
        }

        .pagination h3 {
            color: #5d4e37;
            margin-bottom: 0.8rem;
            font-weight: 500;
            font-size: 1rem;
        }

        .pagination-links {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.8rem;
            flex-wrap: wrap;
        }

        .pagination-links a {
            background: linear-gradient(135deg, #8b7355 0%, #a68a5c 100%);
            color: white;
            padding: 0.6rem 1.2rem;
            border-radius: 20px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 3px 12px rgba(139, 115, 85, 0.25);
            font-size: 0.9rem;
        }

        .pagination-links a:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 16px rgba(139, 115, 85, 0.35);
            text-decoration: none;
        }

        .current-page {
            background: rgba(139, 115, 85, 0.1);
            color: #8b7355;
            padding: 0.6rem 1.2rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        /* 底部 */
        .footer {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            margin-top: 2rem;
            padding: 1.5rem 0;
            border-top: 1px solid rgba(255, 248, 220, 0.3);
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .footer-section h4 {
            color: #8b7355;
            margin-bottom: 0.8rem;
            font-size: 1rem;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 0.5rem;
        }

        .footer-section ul li a {
            color: #6c757d;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-section ul li a:hover {
            color: #8b7355;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 1.5rem;
            border-top: 1px solid #e8dcc0;
            color: #8b7355;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav {
                position: relative;
            }

            .nav-links,
            .search-form {
                display: none;
            }

            .mobile-menu-btn {
                display: block;
            }

            .read-mode-toggle {
                display: none;
            }

            .logo {
                font-size: 1.3rem;
            }

            .content-header h1 {
                font-size: 1.8rem;
            }

            .content-header {
                padding: 1rem;
            }

            .table-container {
                padding: 1rem;
            }

            th, td {
                padding: 0.6rem 0.4rem;
                font-size: 0.8rem;
            }

            .pagination-links {
                flex-direction: column;
                gap: 0.5rem;
            }

            .pagination {
                margin: 1rem auto;
                padding: 1rem;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 0 10px;
            }

            .content-header h1 {
                font-size: 1.5rem;
            }

            .table-container {
                padding: 0.5rem;
            }

            th, td {
                padding: 0.5rem 0.3rem;
                font-size: 0.75rem;
            }
        }

        /* 自定义样式块 */
        {% block extra_css %}{% endblock %}
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <header class="header">
        <div class="container">
            <nav class="nav">
                <a href="/" class="logo">投资复盘系统</a>
                <ul class="nav-links">
                    <li><a href="/">上市公司调研</a></li>
                    <li><a href="/iwen?market=sz">问董秘</a></li>
                </ul>
                <form action="/search" method="get" class="search-form">
                    <input type="text" name="q" placeholder="搜索全站..." value="{{ request.query_params.get('q','') }}" class="search-input">
                    <button type="submit" class="search-button">搜索</button>
                </form>
                <button type="button" class="read-mode-toggle" onclick="toggleReadMode()">阅读模式</button>
                <button type="button" class="mobile-menu-btn" onclick="toggleMobileMenu()">☰</button>
            </nav>
        </div>
    </header>

    <!-- 移动端侧边栏 -->
    <div class="mobile-sidebar" id="mobileSidebar">
        <div class="mobile-sidebar-header">
            <h3>菜单</h3>
            <button type="button" class="mobile-sidebar-close" onclick="toggleMobileMenu()">×</button>
        </div>
        <ul class="mobile-nav-links">
            <li><a href="/">上市公司调研</a></li>
            <li><a href="/iwen?market=sz">问董秘</a></li>
        </ul>
        <div class="mobile-search">
            <form action="/search" method="get" class="mobile-search-form">
                <input type="text" name="q" placeholder="搜索全站..." class="mobile-search-input" value="{{ request.query_params.get('q','') }}">
                <button type="submit" class="mobile-search-button">搜索</button>
            </form>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay" onclick="toggleMobileMenu()"></div>

    <!-- 主要内容 -->
    <div class="container">
        <div class="main-content">
            {% block content_header %}
            <div class="content-header">
                <h1>{% block page_title %}页面标题{% endblock %}</h1>
                <p>{% block page_subtitle %}页面副标题{% endblock %}</p>
            </div>
            {% endblock %}

            <div class="content-body">
                {% block content %}
                <!-- 页面主要内容 -->
                {% endblock %}
            </div>
        </div>

        <!-- 分页 -->
        {% block pagination %}
        {% if pages and page %}
        <div class="pagination">
            <h3>共 {{pages}} 页</h3>
            <div class="pagination-links">
                {% if page > 1 %}
                <a href="{{ request.url.replace_query_params(page=page-1) }}">← 上一页</a>
                {% endif %}
                <span class="current-page">当前为第 {{page}} 页</span>
                {% if page < pages %}
                <a href="{{ request.url.replace_query_params(page=page+1) }}">下一页 →</a>
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% endblock %}
    </div>

    <!-- 底部 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>主要功能</h4>
                    <ul>
                        <li><a href="/">机构调研报告</a></li>
                        <li><a href="/deep">行业深度研报</a></li>
                        <li><a href="/r">研报中心</a></li>
                        <li><a href="/r/year_report">年度报告</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>市场板块</h4>
                    <ul>
                        <li><a href="/?sector=sh">沪市主板</a></li>
                        <li><a href="/?sector=kcb">科创板</a></li>
                        <li><a href="/?sector=sz">深市主板</a></li>
                        <li><a href="/?sector=cyb">创业板</a></li>
                        <li><a href="/?sector=bj">北交所</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>专业服务</h4>
                    <ul>
                        <li><a href="/wechat/sec">信息安全资讯</a></li>
                        <li><a href="/api">API接口</a></li>
                        <li><a href="/report/deep">深度分析</a></li>
                        <li><a href="/wechat/api/sec">微信资讯</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <ul>
                        <li><a href="#about">关于复盘系统</a></li>
                        <li><a href="#contact">联系我们</a></li>
                        <li><a href="#privacy">隐私政策</a></li>
                        <li><a href="#terms">服务条款</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 复盘系统. 专业的金融信息服务平台 | 数据来源：巨潮资讯网、东方财富网、同花顺财经、雪球、东方财富Choice数据、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网、东方财富网、腾讯财经、新浪财经、网易财经、搜狐财经、凤凰财经、和讯网</p>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        function toggleMobileMenu() {
            const sidebar = document.getElementById('mobileSidebar');
            const overlay = document.getElementById('overlay');
            sidebar.classList.toggle('active');
            overlay.classList.toggle('active');
        }

        function toggleReadMode() {
            document.body.classList.toggle('read-mode');
            const btn = document.querySelector('.read-mode-toggle');
            if (document.body.classList.contains('read-mode')) {
                btn.textContent = '退出阅读';
            } else {
                btn.textContent = '阅读模式';
            }
            localStorage.setItem('readMode', document.body.classList.contains('read-mode'));
        }

        // 页面加载时恢复阅读模式状态
        window.addEventListener('DOMContentLoaded', function() {
            const readMode = localStorage.getItem('readMode') === 'true';
            if (readMode) {
                document.body.classList.add('read-mode');
                const btn = document.querySelector('.read-mode-toggle');
                if (btn) btn.textContent = '退出阅读';
            }
        });
    </script>

    <!-- 自定义JavaScript -->
    {% block extra_js %}{% endblock %}
</body>

</html>
